<template>
  <div class="dynamic-table-container">
    <!-- 表格容器（支持滚动） -->
    <div class="table-wrapper">
      <table class="dynamic-table">
        <!-- 表头 -->
        <thead>
          <tr>
            <th v-for="(col, index) in columns" :key="index" :width="col.width">
              {{ col.label }}
            </th>
            <!-- 操作列（固定） -->
            <th v-if="showAction" width="120">操作</th>
          </tr>
        </thead>
        <!-- 表体 -->
        <tbody>
          <tr v-for="(row, rowIndex) in tableData" :key="rowIndex" @click="handleRowClick(row)">
            <!-- 数据列 -->
            <td v-for="(col, colIndex) in columns" :key="colIndex">
              <!-- 支持自定义模板（如格式化时间、状态标签） -->
              <template v-if="col.render">
                <span v-html="col.render(row, rowIndex)"></span>
              </template>
              <span v-else>{{ row[col.prop] || '-' }}</span>
            </td>
            <!-- 操作列 -->
            <td v-if="showAction" class="action-btns">
              <button @click.stop="handleEdit(row)" class="btn edit-btn">编辑</button>
              <button @click.stop="handleDelete(row)" class="btn delete-btn">删除</button>
            </td>
          </tr>
          <!-- 空数据提示 -->
          <tr v-if="tableData.length === 0">
            <td :colspan="columns.length + (showAction ? 1 : 0)" class="empty-tip">
              暂无数据
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DynamicTable',
  // 组件 props（外部传入配置）
  props: {
    // 表格数据（必填）：数组格式，每个元素为一行数据
    tableData: {
      type: Array,
      required: true,
      default: () => []
    },
    // 列配置（必填）：数组格式，定义表头、字段映射等
    columns: {
      type: Array,
      required: true,
      default: () => []
      // 列配置格式示例：{ label: '用户名', prop: 'username', width: '150' }
    },
    // 是否显示操作列（可选）
    showAction: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    // 行点击事件（向外传递行数据）
    handleRowClick(row) {
      this.$emit('row-click', row)
    },
    // 编辑按钮事件
    handleEdit(row) {
      this.$emit('edit', row)
    },
    // 删除按钮事件
    handleDelete(row) {
      this.$emit('delete', row)
    }
  }
}
</script>

<style scoped>
.dynamic-table-container {
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}
.table-wrapper {
  width: 100%;
  overflow-x: auto; /* 适配小屏幕横向滚动 */
}
.dynamic-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.dynamic-table th,
.dynamic-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}
.dynamic-table th {
  background-color: #f5f7fa;
  font-weight: 500;
  color: #333;
}
.empty-tip {
  text-align: center;
  color: #999;
  padding: 40px 0;
}
.action-btns .btn {
  padding: 4px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-right: 8px;
}
.edit-btn {
  background-color: #409eff;
  color: #fff;
}
.delete-btn {
  background-color: #f56c6c;
  color: #fff;
}
</style>